{% extends 'layout/base.html' %}
{% load static %}

{% block title %}用户登录{% endblock title %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock css %}

{% block content %}
    <div class="account">
    <div class="title">用户短信登录</div>
    <br />
    <form class="form-horizontal" method="post" id="smsForm" novalidate>
    {% csrf_token %}
        {% for field in form %}
            {% if field.name == 'verify_code' %}
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <div class="col-sm-10">
                        <div class="col-sm-6" style="padding-left: 0">{{ field }}<span class="error-msg"></span></div>
                        <div class="col-sm-6"><input type="button" id="btnSms" class="btn btn-default" value="获取验证码"></div>
                    </div>
                </div>
            {% else %}
                <div class="form-group">
                <label class="col-sm-2 control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                <div class="col-sm-10">
                    {{ field }}
                    <span class="error-msg"></span>
                </div>
            </div>
            {% endif %}
          {% endfor %}
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="button" id="btnSubmit" class="btn btn-primary">登录</button>
                    <div style="float: right">
                            <a href="{% url 'web:login' %}">账号密码登录？</a>
                    </div>
                </div>
            </div>
    </form>
    </div>
{% endblock content %}

{% block js %}
    <script type="text/javascript">
    $(function (){
        // 发送验证码
        $('#btnSms').click(function (){
            // 获取手机号及模板字符串
            $('.error-msg').empty();
            var mobile_phone =  $('#id_mobile_phone').val();
            var tpl = 'login';
            var params = {'mobile_phone': mobile_phone, 'tpl': tpl};
            $.ajax({
                url: '{% url 'web:sms' %}',
                type: 'post',
                data: params,
                dataType: 'json'
            }).done(function (data){
                if (data.code === 200) {
                    // 发送成功
                    // 60秒倒计时
                    var num = 60;
                    var btn = $('#btnSms');
                    // 进行设置时间
                    var time = setInterval(function () {
                        num -= 1;
                        btn.val(num + "s后重获验证码");
                        // 添加禁用点击效果
                        btn.addClass('disabled');
                        if (num === 0) {
                            clearInterval(time);
                            btn.val("获取验证码");
                            // 解除禁用点击效果
                            btn.removeClass('disabled');
                        }
                    }, 1000);
                }else{
                    // 发送失败
                    console.log(data.msg);
                    // 将错误信息放在页面栏
                    $.each(data.msg, function (key, value){
                        $('#id_' + key).next().text(value[0])
                    });
                }
            }).fail(function (){
                console.log("网络超时");
            });
        });

        // 用户登录
        $('#btnSubmit').click(function (){
            $('.error-msg').empty();
            <!--一次获取所有的input内容, 包括CSRF-->
            params = $('#smsForm').serialize();
            $.ajax({
                url: "{% url 'web:login_sms' %}",
                type: 'post',
                data: params,
                dataType: 'json'
            }).done(function (data){
                if (data.code === 200){
                    location.href = data.msg;
                }else{
                     $.each(data.msg, function (key, value){
                         console.log(key+"-----"+value);
                        $('#id_' + key).next().text(value[0])
                     });
                }
            }).fail(function (){
                console.log("网络超时");
            })
        });
    });
    </script>
{% endblock js %}